<template>
  <div>
    <div v-if="!data || data.length < 1" class="juzhong">
      <span><i class="el-icon-loading"></i>
      加载中</span>
      <el-divider></el-divider>
    </div>
    <div class="video_list animate__animated animate__fadeIn">
      <div class="video_content"
           v-for="item in data"
           :key="item.video_id"
           @click="toDetail(item)"
      >
        <img :src="item.video_cover" alt="#">
        <div class="sub_title">视频名称:{{ item.resource_name }}</div>
        <div class="sub_title">创建者姓名:{{ item.username }}</div>
        <div class="sub_title">创建时间:{{ item.update_time }}</div>
        <div v-if="item.ispass === 0">
          <el-tag
            type="warning"
            effect="light"
            class="tag"
            round>
            未审核
          </el-tag>
        </div>
        <div v-else-if="item.ispass === 1">
          <el-tag
            type="success"
            effect="light"
            class="tag"
            round>
            已通过
          </el-tag>
        </div>
        <div v-else-if="item.ispass === 2">
          <el-tag
            type="danger"
            effect="light"
            class="tag"
            round>
            未通过
            <el-popover
              placement="top-start"
              title="不通过原因"
              width="200"
              trigger="hover"
              :content="item.unpass_reason">
              <el-button slot="reference" circle icon="el-icon-search" size="mini"></el-button>
            </el-popover>
          </el-tag>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 8,
      total: null,
      videoPage: [],
      tableData: [
        {
          "resource_id": null,
          "resource_name": "pe视频不能删",
          "resource_url": null,
          "update_time": "2025-03-07 00:00:19",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/9bbca48d-0ed8-4a83-b5d5-13e3f551c0ca.jpg",
          "video_id": 44,
          "unpass_reason": null,
          "ispass": 1,
          "pass_time": null
        },
        {
          "resource_id": null,
          "resource_name": "好视频也不能删",
          "resource_url": null,
          "update_time": "2025-03-07 00:00:19",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/9bbca48d-0ed8-4a83-b5d5-13e3f551c0ca.jpg",
          "video_id": 45,
          "unpass_reason": null,
          "ispass": 1,
          "pass_time": null
        },
        {
          "resource_id": null,
          "resource_name": "坏视频更不能山",
          "resource_url": null,
          "update_time": "2025-03-07 00:00:19",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/9bbca48d-0ed8-4a83-b5d5-13e3f551c0ca.jpg",
          "video_id": 46,
          "unpass_reason": "视频太短不予通过！",
          "ispass": 1,
          "pass_time": null
        },
        {
          "resource_id": null,
          "resource_name": "猜测.mp4",
          "resource_url": null,
          "update_time": "2025-03-08 18:37:43",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/0619e80a-f94a-496a-a363-93884d47e085.jpg",
          "video_id": 47,
          "unpass_reason": null,
          "ispass": 0,
          "pass_time": null
        },
        {
          "resource_id": null,
          "resource_name": "猜测.mp4",
          "resource_url": null,
          "update_time": "2025-03-08 22:40:04",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/caedeb13-87ed-4e60-bc7d-8b1cd0269232.jpg",
          "video_id": 48,
          "unpass_reason": null,
          "ispass": 0,
          "pass_time": null
        },
        {
          "resource_id": null,
          "resource_name": "猜测.mp4",
          "resource_url": null,
          "update_time": "2025-03-08 22:40:36",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/00919ef1-3938-47db-bf93-948efa201330.jpg",
          "video_id": 49,
          "unpass_reason": null,
          "ispass": 0,
          "pass_time": null
        },
        {
          "resource_id": null,
          "resource_name": "猜测.mp4",
          "resource_url": null,
          "update_time": "2025-03-08 22:41:17",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/64346386-e12f-4bb8-a55e-0ee9a37c4f98.jpg",
          "video_id": 50,
          "unpass_reason": null,
          "ispass": 0,
          "pass_time": null
        },
        {
          "resource_id": null,
          "resource_name": "猜测.mp4",
          "resource_url": null,
          "update_time": "2025-03-10 21:12:51",
          "username": "杨兵老师1号",
          "video_cover": "http://113.45.144.121:2024/video_cover/6c497ddf-3189-4d2a-84cc-0e2a263d285f.jpg",
          "video_id": 53,
          "unpass_reason": null,
          "ispass": 0,
          "pass_time": null
        }
      ],
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  // watch: {
  //   data: {
  //     handler(newVal) {
  //       if (newVal) {
  //         console.log("newval", newVal)
  //         this.data = newVal
  //       }
  //     },
  //     immediate: true, // 是否立即执行一次（类似 watchEffect 的初始运行）
  //   }
  // },
  methods: {
    toDetail(item) {
      this.$router.push(`/resource/${item.resource_id}`)
    }
  },
  updated() {

  }
}

</script>

<style scoped>
/**
grid-template-columns: repeat(5, 1fr);
这个属性用于定义网格容器的列结构。repeat(5, 1fr) 表示创建5列，
每列的宽度都是相等的，并且每列占据等量的可用空间（fractional unit，fr）。

repeat() 函数用于重复指定的列模板一定的次数。
5 是重复的次数，即创建5列。
1fr 是每次重复时使用的列宽度，fr 是一个相对单位，
代表网格容器中所有列宽度的等分。如果有5列，每列都是1fr，
那么它们将平分容器的总宽度。
 */
.video_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vw, 1.5fr));
  margin: auto;
  padding: 10px;
}

.video_content {
  position: relative; /* 添加相对定位 */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: self-start;

  width: 20vw;
  margin: 15px 0;
  padding: 35px;
  border-radius: 20px;
  background: rgba(238, 249, 255, 0.7);
  transition: box-shadow, transform 0.5s ease;
}

.video_content img {
  margin-bottom: 10px;
  width: 16vw;
  object-fit: cover;

  border-radius: 20px;
}

.video_content:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgb(215, 253, 219), /* 第一层阴影，轻微的内发光 */ 0 0 20px rgb(127, 193, 255), /* 第二层阴影，更强的内发光 */ 0 0 30px rgb(255, 243, 210); /* 第三层阴影，较弱的外发光 */
}

.sub_title {
  margin: 3px 0;
}

.page {
  float: right;
  margin: 20px;
}

.tag {
  position: absolute;
  top: -1px;
  left: -1px;
}

.m-2 {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0);
}
</style>
